<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: #000;
		}
		.box{
			width: 300px;
			height: 300px;
			margin: 150px auto 0;
			perspective: 900px;/*焦距*/
		}
		.cube{
			width: 100%;
			height: 100%;
			position: relative;
			transition-duration: 5s;
			transform-style: preserve-3d;/* 建立3D空间 */
			animation: run 5s linear infinite;
		}
		.box1{
			position: absolute;
			width: 300px;
			height: 300px;	
			line-height: 300px;
			text-align: center;
			font-size: 35px;
			font-weight: bold;
			background-image: repeating-linear-gradient(0deg,rgba(230,0,0,0.4) 1px,rgba(150,0,0,0) 5px,transparent 4px ,transparent 44px),repeating-linear-gradient(90deg,rgba(230,0,0,0.4) 1px,rgba(150,0,0,0) 5px,transparent 4px ,transparent 44px);
			border:2px solid deeppink;
		}
		.box:hover .cube{
			transform: rotateY(360deg);
		}
		.box:hover .box1{
			background-color: currentColor;
			opacity: 0.6;
			box-shadow: 0 0 50px currentColor;
		}
		.top{
			color: red;
			transform: translateY(-150px) rotateX(90deg);
		}
		.bottom{
			color: #00f;
			transform: translateY(150px) rotateX(-90deg);
		}
		.left{
			color: #0ff;
			transform: translateX(-150px) rotateY(90deg);
		}
		.right{
			color: pink;
			transform: translateX(150px) rotateY(-90deg);
		}
		.front{
			color: purple;
			transform: translateZ(150px);
		}
		.behind{
			color: yellow;
			transform: translateZ(-150px);
		}
		@keyframes run{
			from{transform:rotateX(0deg)  rotateY(0deg);}
			to{transform: rotateX(360deg) rotateY(360deg);}
		}
		.word{
			width: 300px;
			height: 300px;
			text-align: center;
			line-height: 300px;
			font-size: 40px;
			text-shadow: -1px 1px 1px #f10, 2px 2px 2px #f20, 3px 3px 3px #f30, 4px 4px 4px #f40, 5px 5px 5px #f50;
			border:none;
			color: deeppink;
		}
	</style>
</head>
<body>
		<!-- 
        三维（X,Y,Z）：
        思路：
            1.盒子的布局(核心盒子),建立一个大盒子，在里面包裹一个正方形
            2.正方形里面，处理六个面：
            （top,bottom,left,right,front,behind）
            先做个旋转360动画，在调整六个面的位置，位移，旋转。
            3，在把背景颜色改成字体的颜色,调整字体的大小，位置.
            4，在写格子状，采用平铺线性渐变。
            5,hover上去，六个面取当前文字的颜色。调阴影(也采用当前颜色)，透明度
            6，写动画效果animation,让主正方形转起来，在写中间一个正方形的文字阴影。
            采用以下知识点：
                复位(确定各自的位置（变换：位移，旋转，倾斜，缩放）)
                文字的面板（文字样式的处理）
                3.加些样式（旋转，发光，格子状）
        视镜（景深）：

        
    	 -->
	<div class="box">
		<div class="cube">
			<div class="box1 top">top</div>
			<div class="box1 bottom">bottom</div>
			<div class="box1 left">left</div>
			<div class="box1 right">right</div>
			<div class="box1 front">front</div>
			<div class="box1 behind">behind</div>
			<div class="word">小亮！雄起</div>
		</div>
	</div>
</body>
</html>